import './index.scss'
import { Swiper, DotLoading } from 'antd-mobile'
import ProCard from '@/components/ProductCard'
import { useProductsNew } from './useProNew'
// import { useNavigate } from 'react-router-dom'
// import HomeList from './HomeList'
const ProductNew = () => {
    // 逻辑业务
    const { productsNew, isLoading } = useProductsNew()
    // UI 渲染
    // const navigate = useNavigate()
    const goToDetail = (id: string) => {
      // 路由跳转
      // navigate(`/product/detail?id=${id}`)
      console.log(id);
      
      // navigate(`/product/detail/${id}`)
    }
    return (
    <div className="product-new">
      {isLoading ? <div className='content-box'><span>Loading</span><DotLoading /></div> : 
      <div className='container content-box'>
        <div className="product-title">
          <i></i>
            <h3>Latest Products</h3>
          <i></i>
        </div>
        <div className="product">
          <Swiper autoplay slideSize={100} autoplayInterval={50000}>
            {productsNew.map((item) => (
                <Swiper.Item key={item.id}>
                  <div onClick={() => goToDetail(item.id+'')}>
                    <ProCard 
                      src={item.default_image} 
                      alt={item.alt} 
                      link={`/product/detail/${item.id}`}
                      classname='item-product-new'/>
                  </div>
                </Swiper.Item>
                ))}
          </Swiper>
        </div>
      </div>}

    </div>

    )
  }
  
  export default ProductNew
  